<!-- 个人中心页 -->
<template>
	<view class="my-content u-page" v-if="loading" style="height: auto;">

		<view class="MyService" style="margin-top: 30rpx;">
			<view class="tab">
				<view class="pp_nav" @click="pp_nav(1)" :class="pp_nav_on ==1?'pp_nav_on':''">{{ $t('推广') }}</view>
				<view class="pp_nav" @click="pp_nav(2)" :class="pp_nav_on ==2?'pp_nav_on':''">{{ $t('竞标') }}</view>
				<view class="pp_nav" @click="gz_user()" :class="pp_nav_on ==3?'pp_nav_on':''">{{ $t('用户') }}</view>
			</view>

			<view v-if="pp_nav_on==1" style="width: 100%;">
				<view class="pp_nav_img" @click="skip('goods','1')">
					<image class="pp_nav_imgs" :src='serverImageUrl("/static/images/user/newUI/n1.png")'>
					</image>
					<view :class="lang!='zh'?'font_ru':''" class="pp_text">
						{{ $t('货物') }}
					</view>
				</view>
				<view class="pp_nav_img" @click="skip('transport','1')">
					<image class="pp_nav_imgs" :src='serverImageUrl("/static/images/user/newUI/n2.png")'>
					</image>
					<view :class="lang!='zh'?'font_ru':''" class="pp_text">
						{{ $t('运输') }}
					</view>
				</view>
				<view class="pp_nav_img" @click="skip('crossborder','1')">
					<image class="pp_nav_imgs" :src='serverImageUrl("/static/images/user/newUI/n3.png")'>
					</image>
					<view :class="lang!='zh'?'font_ru':''" class="pp_text">
						{{ $t('跨境货代') }}
					</view>
				</view>
				<view class="pp_nav_img" @click="skip('professional','1')">
					<image class="pp_nav_imgs" :src='serverImageUrl("/static/images/user/newUI/n4.png")'>
					</image>
					<view :class="lang!='zh'?'font_ru':''" class="pp_text">
						{{ $t('专业代办') }}
					</view>
				</view>
				<!-- <view class="pp_nav_img" @click="skip('lifead','1')" >
					<image class="pp_nav_imgs" :src="imgUrl+'/uploads/20240520/f871267b9583e26791c14d677fee958c.png'"></image>
					<view :class="lang!='zh'?'font_ru':''" class="pp_text">{{ $t('生活广告') }}</view>
				</view>
				<view style="clear: both;"></view>
				<view class="pp_nav_img" @click="skip('exposure','1')" >
					<image class="pp_nav_imgs" :src="imgUrl+'/uploads/20240520/56e01b8e903b04ee8ecb8597265c579f.png'"></image>
					<view :class="lang!='zh'?'font_ru':''" style="font-size: 24rpx;width: 100%; text-align: center;">{{ $t('曝光台') }}</view>
				</view> -->
				<view style="clear: both;"></view>
			</view>

			<view v-if="pp_nav_on==2" style="width: 100%;">
				<view class="pp_nav_img2" @click="skip('goods','2')">
					<image class="pp_nav_imgs" :src='serverImageUrl("/static/images/user/newUI/n1.png")'>
					</image>
					<view :class="lang!='zh'?'font_ru':''"
						style="font-size: 24rpx;width: 100%;padding-left: 10rpx; padding-right: 10rpx;word-break: break-word; text-align: center;">
						{{ $t('货物') }}
					</view>
				</view>
				<view class="pp_nav_img2" @click="skip('transport','2')">
					<image class="pp_nav_imgs" :src='serverImageUrl("/static/images/user/newUI/n2.png")'>
					</image>
					<view :class="lang!='zh'?'font_ru':''" class="pp_text">
						{{ $t('运输') }}
					</view>
				</view>
				<view class="pp_nav_img2" @click="skip('crossborder','2')">
					<image class="pp_nav_imgs" :src='serverImageUrl("/static/images/user/newUI/n3.png")'>
					</image>
					<view :class="lang!='zh'?'font_ru':''" class="pp_text">
						{{ $t('跨境货代') }}
					</view>
				</view>
				<view class="pp_nav_img2" @click="skip('professional','2')">
					<image class="pp_nav_imgs" :src='serverImageUrl("/static/images/user/newUI/n4.png")'>
					</image>
					<view :class="lang!='zh'?'font_ru':''" class="pp_text">
						{{ $t('佣金发布') }}
					</view>
				</view>
				<view style="clear: both;"></view>
			</view>
			<view style="height: 30rpx;"></view>

		</view>





		<authNamePopup :show="authShow"></authNamePopup>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar/index.vue";
	import authNamePopup from "@/components/authNamePopup/authNamePopup.vue";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app"
	import {
		createC2CConversation,
		ImageUrl
	} from "@/common/public";

	export default {
		components: {
			tabbar,
			authNamePopup
		},
		data() {
			return {
				off: '',
				lang: getApp().globalData.lang,
				customer: '',
				userInfo: {},
				authShow: false,
				// src: '/static/images/index/WX20230607-235102@2x.png',
				list: [],
				imgUrl: '',
				loading: false,
				isAuthName: -1,

				pp_nav_on: 1,
				goodslist: []

			}
		},
		async onLoad() {
			this.imgUrl = IMAGE_URL
			// this.getUserInfo()
			await this.$onLaunched;

			if (this.lang === 'zh') {
				this.customer = getApp().globalData.site.im_customer001
			} else {
				this.customer = getApp().globalData.site.im_customer002
			}


			this.$u.api.user.appCheck().then(res => {
				this.off = res.logOff
			})
			this.GoodsList() //获取货物列表信息
		},
		onShow() {
			this.loading = false
			this.authShow = false;
			this.getUserInfo()
			/* 验证是否实名认证 */

			this.$u.api.user.appCheck().then(result => {
				if (result.authShow) {
					this.$u.api.user.getUserAudit().then(res => {
						this.isAuthName = res.status;
						if (res.status != '2') {
							if (res.status == '1') {
								this.list[this.list.length - 1].image = HTTP_IMG_UTL +
									'renzhengLoading.png';
							} else {
								//没有实名认证
								this.authShow = true;
							}
						} else {
							this.list[this.list.length - 1].image = HTTP_IMG_UTL + 'renzhengSuccess.png';
						}
					})
				} else {
					this.$u.api.user.getUserAudit().then(res => {
						this.isAuthName = res.status;
						if (res.status != '2') {
							if (res.status == '1') {
								this.list[this.list.length - 1].image = HTTP_IMG_UTL +
									'renzhengLoading.png';
							} else {
								//没有实名认证
								//this.authShow = true;
							}
						} else {
							this.list[this.list.length - 1].image = HTTP_IMG_UTL + 'renzhengSuccess.png';
						}
					})
				}
			})


		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("我的关注")
			})
		},
		methods: {
			ImageUrl,
			pp_nav(i) {
				this.pp_nav_on = i
			},
			//获取货物列表信息
			GoodsList(isSearch = true) {
				let data = {
					page: 1
				}
				this.$u.api.user.getGoodsList(data).then(res => {
					this.goodslist = res
					console.log(res)
				})
			},
			async getUserInfo() {
				var userinfo = "";
				const that = this;
				const {
					deviceBrand,
					deviceModel,
					deviceId,
					osName,
					osVersion
				} = uni.getSystemInfoSync();
				console.log(deviceBrand, deviceModel, deviceId, osName, osVersion)
				userinfo = deviceBrand + ',' + deviceModel + ',' + deviceId + ',' + osName + ',' + osVersion
				let user = await that.$u.api.user.getUserInfo({
					userinfo: userinfo
				});

				// #ifdef APP-PLUS
				plus.push.getClientInfoAsync((info) => {
					let cid = info["clientid"];
					console.log(cid)
					userinfo = deviceBrand + ',' + deviceModel + ',' + deviceId + ',' + osName + ',' +
						osVersion + ',' + cid
					user = that.$u.api.user.getUserInfo({
						userinfo: userinfo
					});
				});
				// #endif


				this.userInfo = user
				this.userInfo.avatar = IMAGE_URL + this.userInfo.avatar
				// 俄罗斯国籍，去掉积分
				if (this.userInfo.country.value === '1' || this.off == false) {
					this.list.splice(6, 1)
				}
				this.loading = true
			},
			gz_user() {
				this.$u.route({
					url: 'pages/user/guanzhu/goodsPromotionDetail',
					params: {
						id: this.userInfo.user_id,
						name: 'user',
						type: 3
					}
				})
			},
			//跳转设置界面
			set() {
				this.$u.route('/pages/user/install/install')
			},
			//我的服务内容跳转
			serve(item, index) {
				console.log(item, this.isAuthName)

				if (item.path === 'pages/user/authRealName/authRealName' && this.isAuthName == '2') {
					this.$u.toast(this.$t('已实名认证'))
					return;
				}
				if (item.path === 'pages/user/authRealName/authRealName' && this.isAuthName == '1') {
					this.$u.toast(this.$t('审核中'))
					return;
				}

				switch (index) {
					case 1:
						uni.switchTab({
							url: '/pages/tabbar/order/index'
						})
						break;
					case 2:
						this.$u.route({
							url: 'pages/user/homePage/homePage',
							params: {
								id: this.userInfo.user_id
							}
						})
						break;
					case 5:
						// 在线客服
						createC2CConversation(this.customer, this, true)
						break;

					default:
						this.$u.route({
							url: item.path
						})
						break;
				}
			},
			// 开通会员跳转
			member() {
				this.$u.route('pages/user/MemberCenter/MemberCenter')
			},
			fabu() {
				this.$u.route({
					url: 'pages/user/issue/issue'
				})
			},
			wait_kaifang() {
				this.$u.route('pages/user/goods/goodslist')
				// uni.showToast({
				// 	title:this.$t('暂未开放')
				// })
			},
			//个人资料跳转
			personal() {
				this.$u.route({
					url: 'pages/user/personal/personal'
				})
			},
			one() {
				this.show = false
			},
			skip(auth, type) {
				this.$u.route({
					url: 'pages/user/guanzhu/goodsPromotionDetail',
					params: {
						name: auth,
						type: type,
						id: this.userInfo.user_id
					}
				})
			},
		},
		computed: {
			timeFormat() {
				return (val) => {
					val = val.replace(/-/g, "/");
					return this.$u.timeFormat(val, 'yyyy-mm-dd')
				}
			},
			toImages() {
				return (src) => {
					return isBase64(src) ? src : IMAGE_URL + src
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 10rpx;
		box-sizing: border-box;
	}

	page {
		background-color: #f6f6f6;
	}

	.u-page {
		display: flex;
		flex-direction: column;
	}

	.pp {
		padding-left: 10rpx;
		font-size: 31rpx;
		font-weight: 600;
		color: #1C1C1C;
		height: 32rpx;
		line-height: 32rpx;
	}

	.pp_nav {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		height: 50rpx;
		line-height: 32rpx;
		color: #999;
	}

	.pp_nav_on {
		font-weight: bold !important;
		color: #1C1C1C !important;
		border-bottom: 8rpx solid #06C36E;
	}


	//整体布局
	.PersonalData {
		height: 240rpx;
		position: relative;

		.set {
			width: 48rpx;
			height: 48rpx;
			float: right;
			/* #ifndef MP-WEIXIN */
			margin-top: 87rpx;
			/* #endif */
			margin-right: 43rpx;
			display: block;
			/* #ifdef MP-WEIXIN*/
			margin-top: 180rpx;
			/* #endif*/
		}


	}

	.userinfo {
		width: 100%;
		// height: 260rpx;
		margin-bottom: 40rpx;
	}

	.image-text_1 {
		display: flex;
		align-items: center;

		.label_1 {
			width: 40rpx;
			height: 40rpx;
			margin: 6rpx 0 3rpx 0;
		}

		.text-group_1 {
			min-width: 100rpx;
			max-width: 144rpx;
			overflow: hidden;
			height: 128rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 40rpx;
			word-break: break-all;
			color: #FFDC20;
			line-height: 128rpx;
			margin-left: 10rpx;
		}
	}

	.image_1 {
		width: 2rpx;
		height: 63rpx;
	}

	.text_4 {
		// width: 310rpx;
		font-size: 25rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 30rpx;
		word-break: break-all;
	}

	.text-wrapper_1 {
		padding: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 123rpx;
		height: 40rpx;
		background: #FFDC20;
		border-radius: 28rpx;
		text-align: center;

		.text_5 {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			height: 30rpx;
			font-size: 24rpx;
			font-weight: 600;
			color: #2A2A2A;
			line-height: 30rpx;
		}
	}

	.block_3 {
		// background-color: gainsboro;
		border-radius: 50%;

		.head {
			width: 159rpx;
			height: 159rpx;
			border-radius: 50%;
		}

		position: absolute;
		left: 45rpx;
		top: -55rpx;
		width: 159rpx;
		height: 159rpx;
	}

	.block_1 {
		width: 90%;
		margin-left: 218rpx;
		align-items: center;

		.text_2 {
			font-size: 38rpx;

			font-weight: 600;
			color: #151515;
			line-height: 62rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.group_1 {
			width: 35rpx;
			height: 35rpx;
			display: inline-block;
			margin-left: 10rpx;
		}
	}

	.text_3 {
		font-size: 29rpx;
		font-weight: 400;
		color: #000000;
		line-height: 35rpx;
		margin-left: 218rpx;
		padding-right: 20rpx;
	}

	//vip布局
	.vip {
		width: 94% !important;
		margin-top: 20rpx;
		margin-left: 3%;
		width: calc(100% - 71.51rpx);
		height: 129.07rpx;
		padding: 0 20rpx 0 20rpx;
		// background-image: url($my-bg-url+ '20230711/464aa3a6c4f321b0d75ab74008470ffb.png');
		background: #2b2525;
		background-size: cover;
		border-radius: 14rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;

	}


	.MyService {
		width: 94%;
		margin-left: 3%;
		position: relative;
		background-color: white;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
	}



	//  我的服务
	.MyServices {
		margin-top: 20rpx;
		width: 94%;
		margin-left: 3%;
		position: relative;
		flex: 1;
		background-color: white;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		p {
			// padding-top: 40rpx;
			padding-left: 39rpx;
			font-size: 31rpx;

			font-weight: 600;
			color: #1C1C1C;
			line-height: 44rpx;
		}

		.list {
			width: 100%;
			// height: 368rpx;
			display: grid;
			grid-template-columns: repeat(4, 25%);
			grid-template-rows: auto auto;
			padding: 20rpx;

			li {
				list-style-type: none;
				display: flex;
				// justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 22rpx;
				font-weight: 400;
				color: #1C1C1C;
				line-height: 30rpx;
			}
		}
	}

	._fain {
		// word-break: break-all;
		margin-top: 18rpx;
		text-align: center;
		margin-bottom: 15rpx;
		padding: 0 8rpx 0 8rpx;

	}

	.pp_nav_img {
		width: 22%;
		text-align: center;
		float: left;
		margin-top: 20rpx;
		margin-left: 2%;
	}

	.pp_nav_imgs {
		width: 60rpx;
		height: 60rpx
	}

	.pp_nav_img2 {
		width: 22%;
		text-align: center;
		float: left;
		margin-top: 20rpx;
		margin-left: 2%;
	}

	.font_ru {
		font-size: 18rpx !important;
	}

	.pp_text {
		font-size: 24rpx;
		width: 100%;
		padding-left: 10rpx;
		padding-right: 10rpx;
		word-break: break-word;
		text-align: center;
	}
</style>